<template>
	<view class="sign_contract">
		<u-cell size="large" title="签约方式" value="电子合同" titleStyle="color:#666" :border="false"></u-cell>
		<view class="title">
			买家信息
		</view>
		<u-cell size="large" title="姓名">
			<u--input placeholder="请输入姓名" slot='value' border="none" inputAlign="right" v-model='name'></u--input>
		</u-cell>
		<u-cell size="large" title="手机号">
			<u--input placeholder="请输入手机号" slot='value' border="none" inputAlign="right" v-model='phone'></u--input>
		</u-cell>
		<u-cell size="large" title="证件类型" :value="cardType ? '护照':'身份证'" isLink @tap="()=>isShowCardPicker=true">
		</u-cell>
		<view class="id_card">
			<view class="card_title">
				证件照
			</view>
			<view class="upload_div">
				<view class="">
					<u-upload :fileList="profileTopList" @afterRead="profileTopPush" @delete="deleteTopPic" name="6"
						multiple :maxCount="1" width="134" height="91">
						<image src="@/static/images/profile/orderList/signContract/fanmian.png" mode="widthFix"
							style="width: 134px;height: 91px;"></image>
					</u-upload>
				</view>
				<view class="">
					<u-upload :fileList="profileBottomList" @afterRead="profileBottomPush" @delete="deleteBottomPic"
						name="6" multiple :maxCount="1" width="134" height="91">
						<image src="@/static/images/profile/orderList/signContract/zhengmian.png" mode="widthFix"
							style="width: 134px;height: 91px;"></image>
					</u-upload>
				</view>
			</view>
		</view>
		<view class="title">
			合同信息
		</view>
		<u-cell size="large" title="付款金额" :value="numberToCurrency(money)" titleStyle="color:#666"></u-cell>
		<u-cell size="large" title="签约时间" :value="$u.timeFormat(signContactTime,'yyyy-mm-dd')" titleStyle="color:#666">
		</u-cell>
		<u-cell size="large" title="提车日期" :value="getCarTime" titleStyle="color:#666" @tap="()=>isShowDateTime=true"
			isLink></u-cell>
		<u-cell size="large" title="提车地址">
			<u--input placeholder="请输入提车地址" slot='value' border="none" inputAlign="right" v-model='address'></u--input>
		</u-cell>
		<view class="id_card">
			<view class="card_title">
				补充条款
			</view>
			<view class="upload_div" style="padding:0 20upx 20upx">
				<u--textarea v-model="supply" placeholder="请输入内容" count></u--textarea>
			</view>
		</view>
		<view class="btn_bg">
			<view class="btn">
				<u-button type="primary" text="签约" @tap="showSelectPay"></u-button>
			</view>
		</view>

		<u-picker :show="isShowCardPicker" :columns="cardTypeList" keyName="name" @confirm="cardPicker"
			@cancel="()=>isShowCardPicker=false" :closeOnClickOverlay='true' @close="()=>isShowCardPicker=false">
		</u-picker>
		<u-calendar :show="isShowDateTime" color="#3c9cff" @confirm="getCarTimePicker"
			@cancel="()=>isShowDateTime=false" :closeOnClickOverlay='true' @close="()=>isShowDateTime=false">
		</u-calendar>
		<u-popup :show="isShowSelect" :round="10" mode="bottom" :closeable="true" :closeOnClickOverlay="true"
			@close="closePopup">
			<view class="box">
				<view class="pay-money">
					<text class="ico">¥</text>{{numberToCurrency(money)}}
				</view>
				<u-cell isLink :border="false" @tap="isShowSelect=false;isShowPayPsd=true">
					<view slot="title" class="cell-title">
						<image src="@/static/images/profile/orderList/signContract/zfb.svg" mode="" class="my-img">
						</image>
						<text style="padding:0 10px;"> 支付宝</text>
					</view>
				</u-cell>
				<u-cell isLink :border="false" @tap="isShowSelect=false;isShowPayPsd=true">
					<view slot="title" class="cell-title">
						<image src="@/static/images/profile/orderList/signContract/wx.svg" mode="" class="my-img">
						</image>
						<text style="padding:0 10px;"> 微信</text>
					</view>
				</u-cell>
			</view>
		</u-popup>
		<u-modal :showConfirmButton='false' :showCancelButton='true' :show="isShowPayPsd" :closeOnClickOverlay="true"
			@cancel="()=>isShowPayPsd=false" @close="()=>isShowPayPsd=false" title="请输入支付密码">
			<view class="slot-content">
				<u-code-input v-model="payMoneyPsd" mode="line" @finish="finshCode" :dot="true" :focus="true">
				</u-code-input>
			</view>
		</u-modal>
		<u-modal :showConfirmButton='true' :showCancelButton='true' :show="showFree" :closeOnClickOverlay="true"
			@cancel="()=>showFree=false" @close="()=>showFree=false" @confirm="confirmFree" title="温馨提示"
			content="系统检测到你已有可填充的数据,是否需要自动填充数据？">
		</u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		sign_contract,
		upd_order_state
	} from '@/api/contents/order/order.js'
	import {
		numberToCurrency
	} from '@/utils/common.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				name: '',
				phone: '',
				cardType: 0,
				money: '5000',
				signContactTime: Date.parse(new Date()) / 1000,
				getCarTime: '',
				address: '',
				supply: '', //补充
				profileTopList: [], //正面证件照
				profileBottomList: [], //反面证件照
				payMoneyPsd: '',
				order_id: 0, //签约的订单ID
				isShowCardPicker: false, //选择证件类型
				cardTypeList: [
					[{
						id: 0,
						name: '身份证'
					}, {
						id: 1,
						name: '护照'
					}]
				],
				//是否打开选择时间
				isShowDateTime: false,
				//签约选择支付方式
				isShowSelect: false,
				//是否弹出付款框
				isShowPayPsd: false,
				showFree: false, //检测当前是否已有个人信息

			};
		},
		computed: {
			...mapState({
				user: state => state.user.user,
			}),
			numberToCurrency() {
				return numberToCurrency
			}
		},
		methods: {
			confirmFree() {
				this.name = this.user.nickname;
				this.phone = this.user.phone;
				this.showFree = false;
			},
			cardPicker(data) {
				this.cardType = data.indexs[0]
				console.log(this.cardType);
				this.isShowCardPicker = false
			},
			getCarTimePicker(data) {
				console.log(data[0]);
				this.getCarTime = data[0]
				this.isShowDateTime = false
			},
			profileTopPush(file) {
				this.profileTopList = file.file;
			},
			profileBottomPush(file) {
				this.profileBottomList = file.file;
			},
			deleteTopPic(event) {
				this.profileTopList = []
			},
			deleteBottomPic(event) {
				this.profileBottomList = []
			},
			showSelectPay() {
				this.isShowSelect = true;
			},
			closePopup() {
				this.isShowSelect = false;
			},
			// 输入支付密码完成
			finshCode(value) {
				sign_contract({
					order_id: this.order_id,
					name: this.name,
					phone: this.phone,
					card_type: this.cardType,
					id_card: '/uview/album/1.jpg,/uview/album/2.jpg',
					money: this.money,
					get_car_time: Date.parse(this.getCarTime)/1000,
					get_car_address: this.address,
					supply: this.supply,
					code: value
				}).then(res => {
					if (res.code == 1) {
						this.changeOrder(this.order_id)
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				})

			},
			// 变更订单信息
			changeOrder(order_id) {
				upd_order_state({
					order_id: order_id,
					state: 2
				}).then(res => {
					if (res.code == 1) {
						this.payMoneyPsd = '';
						this.isShowPayPsd = false;
						this.$refs.uToast.show({
							message: "签约成功！",
							complete() {
								uni.navigateTo({
									url: '../orderList'
								})
							}
						})
					}
				})
			},
		},
		onLoad(options) {
			if (this.user.user_id) {
				this.showFree = true;
			}
			if (options.price) {
				this.money = options.price * 10000
			}
			if (options.order_id) {
				this.order_id = options.order_id
			}
		}

	}
</script>

<style lang="scss" scoped>
	.sign_contract {
		font-size: 28upx;
		color: #333;

		.title {
			padding: 0 26upx;
			height: 80upx;
			line-height: 80upx;
			background: #f6f6f6;
			font-size: 24upx;
			color: #999999;
			letter-spacing: 0.6px;
		}

		.card_title {
			height: 100upx;
			line-height: 100upx;
			padding: 0 26upx;
			font-size: 32upx;
			font-weight: 400;
			color: #333;
		}

		.upload_div {
			display: flex;
			justify-content: space-around;
			padding-bottom: 40upx;

			.u-upload {
				flex: 0;
			}


		}

		.btn_bg {
			height: 200upx;
			background: #f6f6f6;
			display: flex;
			justify-content: center;
			align-items: center;

			.btn {
				width: 80%;
			}
		}

		.box {
			height: 600upx;
			padding: 0 40upx;

			.pay-money {
				height: 250upx;
				line-height: 250upx;
				text-align: center;
				font-size: 45upx;
				margin-bottom: 20upx;
				font-weight: 800;
				color: #3e3e3e;
				border-bottom: 1upx solid #e6e6e6;

				.ico {
					font-size: 30upx;
				}
			}

			.cell-title {
				display: flex;

				.my-img {
					width: 48upx;
					height: 48upx;
				}
			}
		}

		.slot-content {
			height: 80upx;
			line-height: 80upx;
		}
	}
</style>
